<template>
  <div class="app">
    <input type="text" v-model="addbook" />
    <button @click="btnshuzi">添加数字</button>
    <h2>模板中计算，字符拼接：{{ arr.books.length >= 3 ? arr.books.join('-') : arr.books[0] }}</h2>
    <h2>计算属性，字符拼接：{{ comp }}</h2>
    <h2>可写计算属性：{{ compset }}</h2>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
let arr = ref({
  name: '数字',
  books: ['12', '123', '45', '654', '324']
})

let comp = computed(() => {
  return arr.value.books.length >= 3 ? arr.value.books.join('-') : arr.value.books[0]
})
let addbook = ref('')
function btnshuzi() {
  arr.value.books.push(addbook.value)
}

let compset = computed({
  get: () => {
    return arr.value.books.length >= 3 ? arr.value.books.join('-') : arr.value.books[0]
  },

  set(val: string) {
    arr.value.books = [...arr.value.books, val]
  }
})

compset.value = 'set计算属性'
</script>

<style scoped></style>
